<script setup lang="ts">
import {getDictLabelByValue, sexDict} from "@/LocalDict/dict"

const userStore = useUserStore()
</script>

<template>
  <div class="rounded-2 bg-white p-6px flex flex-col items-center gap-30px">
    <div class="header w-full flex items-center gap-5px">
      <i-custom-userinfo width="24px" height="24px" />
      <span>个人信息</span>
    </div>
    <div class="bg-#f7f8fa flex flex-col w-full gap-10px rounded-2 p-6px relative pt-30px">
      <n-avatar :src="userStore.userInfo?.avatar || 'https://07akioni.oss-cn-beijing.aliyuncs.com/demo1.JPG'"
                round size="large"
                class="avatar w-50px h-50px absolute top-0 left-50% transform-translate-x-[-50%] transform-translate-y-[-50%]" />
      <div class="flex items-start justify-between gap-5px">
        <div>昵称:</div>
        <div class="flex-1">{{userStore.userInfo?.nickName}}</div>
      </div>
      <div class="flex items-start justify-between gap-5px">
        <div>手机:</div>
        <div class="flex-1">{{userStore.userInfo?.phone}}</div>
      </div>
      <div class="flex items-start justify-between gap-5px">
        <div>邮箱:</div>
        <div class="flex-1">{{userStore.userInfo?.email}}</div>
      </div>
      <div class="flex items-start justify-between gap-5px">
        <div>介绍:</div>
        <div class="flex-1">{{userStore.userInfo?.introduce}}</div>
      </div>
      <div class="flex items-start justify-between gap-5px">
        <div>性别:</div>
        <div class="flex-1">{{getDictLabelByValue(sexDict, userStore.userInfo?.sex || 0)}}</div>
      </div>
      <div class="flex items-start justify-between gap-5px">
        <div>文章:</div>
        <div class="flex-1">{{userStore.userInfo?.articleCount}}</div>
      </div>
      <div class="flex items-start justify-between gap-5px">
        <div>点赞:</div>
        <div class="flex-1">{{userStore.userInfo?.likedCount}}</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.header{
  padding-bottom: 5px;
  border-bottom:2px solid #aaaaaa;
}
</style>
